Forms

Every group of form fields should reside in a <form> element. Astral provides no default styling for the <form> element, but there are some powerful browser features that are provided by default.

• New to browser forms? You may consider reviewing the MDN form docs for an overview and complete list of available attributes.
• <button>s within a <form> default to type="submit", so strive to be specific and always include a type.
• You can disable every form element within a form with the disabled attribute on the <form>.

Form Grid

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

More complex layouts can also be created with the grid system.

      

 

   Email
   

 

   Password
   

 

   Address
   

 

   Address 2
   

 

   City
   

 

   State
   
   Choose...
   ...
  

 

   Zip
   

 

   

   
   Check me out
  

 

   Sign in


      

Horizontal Forms

Create horizontal forms with the grid by adding the .columns class to form groups and using the .column .col-* classes to specify the width of your labels and form inputs.

  

    Email
    

  
 


   Password
   

   
 


  

   

     
     Example checkbox
  


Sign in

Column Spacing

As shown in the previous examples, our grid system allows you to place any number of .columns within a .columns. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .columns equally split the rest, with specific column classes like .column.col-7. or .column.col-md-7.